<template>
	<view class="tui-loading tui-loading__box" :class="{'tui-loading__fixed':fixed}" :style="{ backgroundColor: backgroundColor, color: color,position:fixed?'fixed':'static' }" v-if="type === 'column'">
		<image class="tui-loading__ani" :src="src"></image>
		<view class="tui-loading__text">{{ text }}</view>
	</view>
	<view v-else class="tui-loading tui-loading__row" :class="{'tui-loading__fixed':fixed}" :style="{position:fixed?'fixed':'static'}">
		<image class="tui-loading-row__ani" :src="rowsrc"></image>
		<view class="tui-loading__text">{{ text }}</view>
	</view>
</template>

<script>
export default {
	name: 'tuiLoading',
	props: {
		//column or row
		type: {
			type: String,
			default: 'column'
		},
		text: {
			type: String,
			default: '加载中'
		},
		//type=column时生效
		color: {
			type: String,
			default: '#fff'
		},
		//type=column时生效
		backgroundColor: {
			type: String,
			default: 'rgba(0, 0, 0, 0.6)'
		},
		//type=column时生效
		src: {
			type: String,
			default:
				''
		},
		//type=row时生效
		rowsrc: {
			type: String,
			default:
				''
		},
		fixed: {
			type: Boolean,
			default: true
		}
	}
};
</script>

<style scoped>
.tui-loading {
	display: flex;
	align-items: center;
	justify-content: center;
}
.tui-loading__fixed{
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
}
.tui-loading__box {
	min-width: 200rpx;
	min-height: 200rpx;
	max-width: 500rpx;
	flex-direction: column;
	border-radius: 10rpx;
}
.tui-loading__ani {
	width: 64rpx;
	height: 64rpx;
	margin: 0 6px;
	animation: rotate 0.9s linear infinite;
	margin-bottom: 30rpx;
}

.tui-loading__row {
	width: 100%;
	height: 36rpx;
	color: #888;
}

.tui-loading-row__ani {
	width: 36rpx;
	height: 36rpx;
	display: block;
	border-radius: 50%;
	animation: rotate 0.9s linear infinite;
	margin-right: 20rpx;
}

.tui-loading__text {
	font-size: 26rpx;
	line-height: 26rpx;
	text-align: center;
}

@-webkit-keyframes rotate {
	from {
		transform: rotatez(0deg);
	}
	to {
		transform: rotatez(360deg);
	}
}
@keyframes rotate {
	from {
		transform: rotatez(0deg);
	}
	to {
		transform: rotatez(360deg);
	}
}
</style>
